<script setup>
import { getDetails,getAnnouncementList } from '@/api/modules/help-center.js'
import router from '@/router/index.js'
import { useRoute } from 'vue-router'
import {useI18n} from "vue-i18n";

const { t } = useI18n()

// 获取公告列表
const leftNotice = ref([])
const rightNotice = ref([])
const getAnnouncement =()=>{
  getAnnouncementList({pageSize:6,pageNum:1,noticeType:4}).then(({ rows }) => {
    leftNotice.value = rows
  })
  getAnnouncementList({pageSize:6,pageNum:1,noticeType:5}).then(({ rows }) => {
    rightNotice.value = rows
  })
}
getAnnouncement()
//  公告詳情
const tabsList = computed(() => {
  return [
    {
      label: t('content.notice.Announcement'),
      noticeType: 0
    },
    {
      label: t('content.helpCenter.questionAnswer'),
      noticeType: 4
    },
    {
      label: t('content.helpCenter.systemAnnouncement'),
      noticeType: 5
    }
  ]
})
// 跳转
const jump = (index) => {
  console.log('点击跳转')
  console.log(route)
  router.push({name:'help', query:{activeIndex:index}})
}
const activeIndex = ref(0)
//  获取详情
const route = useRoute()
const details = ref()
const getDetailsFn = (id) => {
  if(!id) return jump(4)
   getDetails(id).then(({ data }) => {
     details.value = data
     ElMessage.success('加载成功')
    } )
}
getDetailsFn(route.query.id)
</script>

<template>

  <div class="contactOurBg py-[70px] text-center relative overflow-hidden">
    <h2 class="text-[30px] fadeInRight animated">{{$t('content.helpCenter.bgTitle1')}}</h2>
    <h3 class="mt-[20px] fadeInLeft animated">{{$t('content.helpCenter.bgTitle2')}}</h3>
    <div class="w-full absolute bottom-0 left-0 lg:left-1/2 lg:-translate-x-1/2 overflow-x-auto lg:w-[1024px] contentList pr-3">
      <div class="flex">
        <span
          v-for="item in tabsList"
          :key="item.noticeType"
          class="bg-white rounded-t-lg text-black ml-3 hover:text-[#8f647b] p-3 transition-all text-nowrap cursor-pointer"
          :class="activeIndex === item.noticeType ? 'active' : ''"
          @click="jump(item.noticeType)"
        >{{ item.label }}</span>
      </div>
    </div>
  </div>
  <div class="flex justify-center min-h-[400px] ">
    <div class="lg:w-[1024px] w-full p-3 pt-[50px]" v-html="details"></div>
    <el-empty v-if="!details" description="这里空空如也！" />
  </div>

  <div class="w-full lg:w-[1024px]  m-auto px-4"> <el-divider />
    <div class="ne_tab w-full mb-[20px] overflow-hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-3 gap-30">
      <div class="ne w-full float-left" >
        <div class="ne_title w-full  border-b-[1px] border-b-gray-[#ddd] border-b-solid table text-[18px] font-bold pb-[10px] mt-[15px] text-[#ffa900]">
          {{$t('content.helpCenter.questionAnswer')}}
          <span @click="$router.push({name:'help',query:{activeIndex:4}})" class="text-[#999] text-[12px] font-normal float-right  leading-[30px]">+MORE</span>
        </div>
        <ul class="w-full mt-[15px]" v-if="leftNotice.length">
          <li v-for="item in leftNotice" :key="item.id" @click="getDetailsFn(item.id)">
            <div class="text-[#666] w-[60%] h-[30px] whitespace-nowrap overflow-ellipsis overflow-hidden float-left  hover:text-[#ffa900]">
              {{item.title}}
            </div>
            <span class="text-[#999]  float-right ">
              {{new Date(item.createTime).getFullYear()}}/{{ new Date(item.createTime).getMonth() + 1 }}/{{ new Date(item.createTime).getDate() }}
            </span>
          </li>
        </ul>
      </div>
      <div class="ne_r  w-full float-right">
        <div class="ne_title  w-full border-b-[1px] border-b-gray-[#ddd] border-b-solid table text-[18px] font-bold pb-[10px] mt-[15px] text-[#ffa900]">
          {{$t('content.helpCenter.systemAnnouncement')}}
          <span  @click="$router.push({name:'helpCenter',query:{activeIndex:5}})" class="text-[#999] text-[12px] font-normal float-right  leading-[30px]">+MORE</span></div>
        <ul class="w-full mt-[15px]" v-if="rightNotice.length">
          <li @click="getDetailsFn(item.id)"  v-for="item in rightNotice" :key="item.id">
            <div target="_blank" class="text-[#666] w-[60%] h-[30px] whitespace-nowrapoverflow-ellipsis overflow-hidden float-left hover:text-[#ffa900]">
              {{item.title}}
            </div>
            <span class="text-[#999] float-right">
              {{new Date(item.createTime).getFullYear()}}/{{ new Date(item.createTime).getMonth() + 1 }}/{{ new Date(item.createTime).getDate() }}
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.contactOurBg {
  background: url(@/assets/img/noticeDetails/new-banner.jpg) #f8f8f9 top center no-repeat;
  background-size: cover;
  color: #fff;
}

.contentList::-webkit-scrollbar {
  display: none;
}

.clause h2 {
  font-weight: bold;
}

.clause h3 {
  font-weight: bold;
  text-indent: 2em;
}

.clause h4 {
  text-indent: 4em;
}

.clause h5 {
  text-indent: 6em;
}
.active {
  color: red;
}



</style>
